<template>
<div class="flow-list__wrapper">
  <!--翻页（假翻页）-->
  <table-wrap :all-list="businessListTable" ref="tableWrapRef">
    <div slot="search" class="fl">
      <el-button type="text"
                 class="primary_btn"
                 @click.stop="addNew"
                 size="mini">
        <i class="el-icon-plus"></i>{{$t('configLazyLoad.businessConfig.configureNewWorkOrderFlow')}}</el-button>
      <el-input
        size="mini"
        :placeholder="$t('configLazyLoad.businessConfig.inputPlaceholder')"
        v-model.trim="name"
        @keyup.enter.native="fetchData"
        style="width:300px"
      >
        <i
          class="el-input__icon el-icon-search"
          slot="suffix"
          @click.stop="fetchData">
        </i>
      </el-input>
    </div>
    <el-table
      slot="table"
      size="mini"
      :stripe="true"
      slot-scope="slotScope"
      :data="slotScope.current">
      <template v-for="item in tableHead">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
        >
          <template scope="scope" >
            <!--文字样式有变化-->
            <span v-if="item.prop === 'status'" :class="['flow-table__' + scope.row.status]">{{scope.row.status === 'enable' ? $t('sms.reuse'): $t('config.channel.disabled')}}</span>
            <!--操作-->
            <template v-else-if="item.prop === 'operate'">
              <span class="flow-table__button" @click="detail(scope.row)">{{$t('public.intelDetails')}}</span>
              <span class="flow-table__button" @click="copyAction(scope.row)">{{$t('configLazyLoad.businessConfig.copy')}}</span>
              <el-popover
                placement="top"
                v-model="scope.row.show"
                trigger="click">
                <div class="popover"><i class="flow-table__disable el-icon-warning"></i>{{$t('configLazyLoad.businessConfig.fieldTip3')}}{{scope.row.status !== 'enable' ? $t('sms.reuse'): $t('config.channel.disabled')}}{{$t('configLazyLoad.businessConfig.fieldTip10')}}</div>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" @click="changeStatus(scope.row)">{{scope.row.status !== 'enable' ? $t('sms.reuse'): $t('config.channel.disabled')}}</el-button>
                  <el-button type="primary" size="mini" @click="scope.row.show = false">{{$t('public.cancel')}}</el-button>
                </div>
                <span :class="['flow-table__button', 'flow-table__' + scope.row.status + '1']" slot="reference">{{scope.row.status !== 'enable' ? $t('sms.reuse'): $t('config.channel.disabled')}}</span>
              </el-popover>
            </template>
            <template v-else-if="item.prop === 'updateTimeArr'">
              <el-popover
                :disabled="!scope.row.updateTimeArr.length"
                placement="right"
                v-model="scope.row.showUpdateTime"
                trigger="click">
                <span slot="reference" class="update-time">{{scope.row.updateTimeArr[0]}}</span>
                <div class="update-time-content">
                  {{$t('configLazyLoad.businessConfig.editHistory')}}
                  <br>
                  <template v-for="time in scope.row[item.prop]" >
                    {{time}}<br>
                  </template>
                </div>
              </el-popover>
            </template>
            <!--普通-->
            <template v-else>{{scope.row[item.prop]}}</template>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </table-wrap>
  <!--复制动作弹框-->
  <el-dialog
    :title="copyDialog.title"
    :visible="copyDialog.visible"
    width="30%"
    @close="copyDialog.visible = false"
  >
    <span class="fl copy-label">{{$t('configLazyLoad.businessConfig.nameOfNewBusiness')}}</span><el-input v-model.trim="copyDialog.name" class="copy-input"></el-input>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="copy('jump')">{{$t('configLazyLoad.businessConfig.copyAndGoToDetailsPage')}}</el-button>
      <el-button type="primary" size="mini" @click="copy('')">{{$t('configLazyLoad.businessConfig.copy')}}</el-button>
    </span>
  </el-dialog>
</div>
</template>
<script>
  import tableWrap from './base/tableWrap'
  import {getCurrentDateTime} from '@/utils/m7Utils'
  export default {
    name: 'flowList',
    data () {
      return {
        tableHead: [
          {prop: 'name', label: this.$t('configLazyLoad.businessConfig.nameOfBussinessTemplate')},
          {prop: 'status', label: this.$t('configLazyLoad.businessConfig.bussinessStatus')},
          {prop: 'createTime', label: this.$t('configLazyLoad.businessConfig.createTime')},
          {prop: 'updateTimeArr', label: this.$t('configLazyLoad.businessConfig.editTime')},
          {prop: 'operate', label: this.$t('public.operate')}
        ], // 表头
        businessList: [], // 所有list
        businessListTable: [], // table展示的list
        name: '', // 搜索内容
        copyDialog: {
          visible: false,
          title: '',
          name: '',
          data: {}
        },
        isAdd: true
      }
    },
    components: {
      tableWrap
    },
    methods: {
      // 获取工单列表
      fetchData () {
        return this.$store.dispatch('queryAccountBusinessFlow', {}).then((res) => {
          res.data.forEach((item) => {
            // popover弹框的显示隐藏
            item.show = false
            item.showUpdateTime = false
            item.updateTimeArr = (item.updateTimeArr || []).map((item) => {
              return item.updateTime || ''
            })
          })
          this.businessList = res.data
          this.$refs.tableWrapRef.init(this.isAdd)
          this.search()
        })
      },
      copyAction (data) {
        this.copyDialog.visible = true
        this.copyDialog.data = data
        this.copyDialog.name = ''
        this.copyDialog.title = this.$t('configLazyLoad.businessConfig.copyBusinessModule') + `(${data.name})`
      },
      /*
      * 复制动作
      * */
      copy (type) {
        if (!this.copyDialog.name) {
          this.$message.error(this.$t('configLazyLoad.businessConfig.businessNameTip'))
          return
        }
        if (this.copyDialog.name.length > 10) {
          this.$message.error(this.$t('configLazyLoad.businessConfig.businessNameTip1'))
          return
        }
        this.$store.dispatch('copyBusinessFlow', {flow_id: this.copyDialog.data._id, name: this.copyDialog.name}).then((res) => {
          if (res.success) {
            this.$message.success('复制成功')
            this.copyDialog.visible = false
            if (type === 'jump') {
              this.detail({_id: res.data})
            } else {
              this.fetchData()
            }
          }
        })
      },
      /*
      * 工单详情
      */
      detail ({_id}) {
        this.isAdd = false
        this.$store.commit('flowConfig/FLOW_CHANGE_TYPE', 'detailFlow')
        this.$router.push({path: '/index/newConfig/businessConfig/busConfigDetail', query: {_id}})
      },
      /*
      * 新建工单
      * */
      addNew () {
        this.isAdd = true
        this.$store.commit('flowConfig/FLOW_CHANGE_TYPE', 'newFlow')
        this.$router.push({path: '/index/newConfig/businessConfig/busConfigNew'})
      },
      /*
      * 工单查询
      * */
      search () {
        this.businessListTable = this.businessList.filter((item) => {
          if (item.name.indexOf(this.name) !== -1) {
            return true
          }
        })
      },
      /*
      * 工单启用停用
      * */
      changeStatus ({_id, status}) {
        let data = {_id, status: status === 'enable' ? 'disable' : 'enable'}
        this.$store.dispatch('changeStatusBusinessFlow', data).then(() => {
          this.businessList.forEach((item) => {
            if (item._id === data._id) {
              item.status = data.status
              item.show = false
              item.updateTimeArr.unshift(getCurrentDateTime())
            }
          })
        })
      }
    },
    beforeRouteEnter (to, from, next) {
      next(vm => {
        vm.name = ''
        vm.fetchData()
      })
    }
  }
</script>

<style scoped lang='stylus'>
  @import "../../../../assets/common.styl"
  .flow-list__wrapper
    height 100%
    overflow-y auto
    box-sizing border-box
    padding 20px
  .flow-table__button
    color $c-main
    display inline-block
    padding-right:10px
    cursor pointer
  .flow-table__disable
    color $cf-color0
  .flow-table__enable1
    color $c-pink
  .popover
    font-size 12px
    padding-bottom 15px
    i
      font-size 16px
      margin-right 5px
  .copy-label
    padding 5px 5px 0 0
  .copy-input
    width calc(100% - 80px)
  .update-time
    &:hover
      cursor pointer
      color $c-main
  .update-time-content
    font-size 12px
    max-height 350px
    overflow-y auto
</style>
